<template>
	<view class="container">
		<Navbar isBlack />
		<view class="competition">
			<view class="competition-title">
				比赛规则与奖项
			</view>
			<view class="competition-content">
				<image class="group" src="/static/competition/group.png" />
				<view class="introduce">
					<view class="matter">
						+ days matter
					</view>
					<view class="rich">
						<rich-text :nodes="nodes"></rich-text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import Navbar from '@/components/Navbar/Navbar.vue'

	const nodes = `
		<div class="title">
			比赛介绍：
		</div>
		       <div class="content">全国大学生英语竞赛(NationalEnglish Competition for College Students,简称NECCS)是经教育部有关部门批准，由国际英语外语教师协会中国英语外语教师协会（TEFLChina）和高等学校大学外语教学研究会联合主办，英语辅导报社、考试与评价杂志社承办的大学生英语综合能力竞赛，是我国规模较大、参与人数众多的全国性大学生英语综合能力竞赛。</div>
		<div class="title">比赛规则：</div>
		        <div class="content">[网络报名]：2022年12月10日-2023年09月20日，通过http://www.bisai.com报名。</div>
		      <div class="content"> [比赛时间安排]：初赛2023年10月25日9:00-11:00（星期日）。赛题包括笔答和听力两部分。听力采取播放录音的形式。</div>
		       <div class="content">全国总决赛：拟于2023年寒假期间举行</div>
		<div class="title">奖项：</div>
		      <div class="content"> 本竞赛A、B、C、D四个类别均设四个国家奖励等级：特等奖、一等奖、二等奖和三等奖。</div>
		<div class="content">二等奖和三等奖：通过初赛产生，分别依据各参赛高校初赛人数的30‰和50‰评选。</div>
		<div class="content">特等奖和一等奖：通过决赛产生，由省(自治区、直辖市）竞赛组织机构根据决赛成绩确定。</div>
		<div class="content">总获奖比例为参加初赛人数的86‰，特等奖获奖比例为1‰，一等奖获奖比例为5‰，二等奖获奖比例为30‰，三等奖获奖比例为50‰。</div>
	`
</script>

<style lang="scss" scoped>
	.container {
		background-color: #b8cef6;

		.competition {
			padding-top: 40rpx;
			height: 100%;



			&-title {
				color: #020202;
				font-family: "PINGFANG-HEAVY";
				font-size: 55rpx;
				font-weight: 400;
				padding-left: 52rpx;
			}

			&-content {
				min-width: 100%;
				height: 100%;
				margin-top: 60rpx;
				position: relative;

				.group {
					width: 246rpx;
					height: 195rpx;
					position: absolute;
					top: -170rpx;
					right: 35rpx;
					z-index: 0;
				}

				.introduce {
					position: relative;
					background-color: #000000;
					border-radius: 52rpx 52rpx 0 0;
					padding: 100rpx 48rpx;
					z-index: 10;
					height: 100%;
				}

				.rich {
					width: 100%;
					overflow: auto;
					height: calc(100% - 200rpx);

					.title {
						color: #f8fdff;
						font-family: "PINGFANG-BOLD";
						font-size: 30rpx;
						font-style: normal;
						font-weight: 400;
						line-height: 46rpx;
					}

					.content {
						color: #b0b0b0;
						font-family: "PINGFANG-MEDIUM";
						font-size: 30rpx;
						text-indent: 2em;
					}
				}

				.matter {
					width: 238rpx;
					height: 70rpx;
					border-radius: 35rpx;
					background: #B8CEF6;
					position: absolute;
					top: 26rpx;
					right: 30rpx;
					color: #020202;
					text-align: center;
					font-family: "PINGFANG-BOLD";
					font-size: 28rpx;
					line-height: 70rpx;
					cursor: pointer;
				}
			}
		}

		// .login {
		// 	background-color: #090e1d;
		// 	height: 100%;
		// 	border-radius: 85rpx 85rpx 0 0;
		// 	position: relative;
		// 	padding: 42rpx 95rpx 42rpx 85rpx;
		// }
	}
</style>